<template>
	<view>
		<cu-custom v-if="customShow" bgColor="bg-fafafa" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title}}</block>
			<!-- #ifdef APP-PLUS -->
			<block slot="right">
				<view class="text-themeColor rightBtn" @click="save">保存</view>
			</block>
			<!-- #endif -->
		</cu-custom>
		<common-view :indicator="indicator"></common-view>
		<form>
			<view class="cu-form-group margin-top" style="overflow-x: hidden;">
				<textarea :placeholder="'请输入'+label" :value="val!='null'?val:''" @input="inputValue" auto-height="true" style="min-height:150upx;"/>
			</view>
			
			<!-- #ifndef APP-PLUS -->
			<view class="cu-tabbar-height"></view>
			<view class="cu-bar tabbar foot bg-white shadow" style="display:block;">
				<view style="padding: 20upx 30upx;">
					<button class="cu-btn block bg-themeColor text-bold lg round" @click="save"
						:disabled="indicator?true:false" style="font-size:26upx;">
						保 存
					</button>
				</view>
			</view>
			<!-- #endif -->
		</form>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import userObj from 'model/userModel.js';
	let me = null;
	export default {
		data() {
			return {
				customShow:0,
				indicator:0,
				title:'',
				label:'',
				field:'',
				val:'',
				old_val:''
			};
		},
		onLoad(options) {
			me = this;
			//#ifdef H5 || MP-BAIDU || MP-TOUTIAO || MP-WEIXIN
			this.customShow = 1;
			//#endif
			if(options.title){
				me.title = options.title;
				me.label = options.title;
				
				// #ifdef APP-PLUS
				uni.setNavigationBarTitle({
					title: me.title
				});
				// #endif
			}
			if(options.field){
				me.field = options.field;
			}
			if(options.val){
				me.val = options.val;
				me.old_val = options.val;
			}
		},
		onNavigationBarButtonTap(e) {
			this.save();
		},
		computed: {
			...mapState({
				userInfo: ({
					userModule
				}) => userModule.userInfo
			})
		},
		methods:{
			...mapMutations(['userModule/update']),
			inputValue(e) {
				this.val = e.target.value;
			},
			save(){
				uni.hideKeyboard();
				if(me.val==me.old_val){
					uni.navigateBack({
						delta:1
					})
					return false;
				}
				me.indicator = 2;
				
				var post_data = {
					[me.field]: me.val,
					user_id: me.userInfo.user_id
				};
				userObj.setVal(me, JSON.stringify(post_data)).then(
					res=>{
						return userObj.getUserInfo(me);
					}
				).then(
					res=>{
						uni.showToast({
							title: '修改成功',
							image: '../../static/successed.png',
							duration: 1000
						});
						me['userModule/update'](res);
						me.setUserInfo(me.userInfo);
						var t = setInterval(function(){uni.navigateBack({delta:1});clearInterval(t);}, 900);
					}
				).catch(err=>{
					uni.showToast({
						title: err,
						image: '../../static/error.png',
						duration: 1000
					})
				});
			}
		}
	}
</script>

<style>
	.cu-bar.tabbar,.cu-tabbar-height {
		min-height: 120upx;
	}
	.member-top {
		background-color: #fff;
		background-size: cover;
		text-align: center;
		width: 100%;
		position: relative;
		z-index: 1;
		padding: 1.5rem 0;
	}

	.member-top .member-head {
		background: #e7e7e7;
		margin: 0 auto;
		width: 84px;
		height: 84px;
		border-radius: 50%;
		padding: 2px;
	}

	.member-top .member-head image {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.member-top .member-name {
		width: 100%;
		color: #888;
		margin: 5px 0 0 0;
		font-size: 0.65rem;
	}
	.cu-form-group .title{
		font-size: 28upx;
	}
	.cu-form-group textarea{
		font-size: 28upx;
		color: #888;
	}
	.cu-form-group picker{
		padding-right: 10px;
	}
	.cu-form-group picker .picker{
		font-size: 25upx;
		color: #888;
	}
	.cu-form-group picker::after{
		display: none;
	}
	.text-align-right{
		text-align:right;
	}
	.text-align-left{
		text-align:left;
	}
	.cu-form-group+.cu-form-group{
		border: none;
	}
</style>